<template>
	<view class="content">
		<view class="topNav">
			<view class="topNav" style="margin:0 -32rpx ;padding32rpx ;height: 90rpx;">
				<div class="cuIcon-back icon left" @click="back"></div>
				<div class="center">读书记录</div>
			</view>
		</view>
		<div style="width: 100%;height: 90rpx;"></div>
		<div class='dataCont'>
			<div class='item' v-for='(item,index) in data' :key='index' @click='toNext(item)'>
				<img :src='item.book_image' alt="" class='coverImg'>
				<div>
					<div class='title'>{{item.book_name}}</div>
					<div class='progress'>读书进度：{{item.percentage}}%</div>
				</div>
			</div>
		</div>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				count:0,
				page_index:1,
				page_num:10,
			}
		},
		onLoad() {
			//console.log('e==入参===')
		},
		onShow() {
			this.init()
			//console.log('执行了onShow')
		},
		mounted() {},
		onReachBottom() {
			//console.log(this.count/this.page_index)
			if (this.count/this.page_index>this.page_num) {
				this.page_index++;
				this.getData();
				//console.log('加载更多');
			} else {
				//console.log('没有更多了');
			}
		},
		methods: {
			init(){
				this.page_index=1
				this.page_num=10
				this.data=[]
				this.count=0
				this.getData()
			},
			back() {
				// uni.navigateBack()
				uni.navigateTo({
					url: `/pages/index/index?type=4`
				});
			},
			toNext(item) {
				uni.navigateTo({
					url: `/pages/book/details?id=${item.book_id}&from=5`
				});
			},
			getData() {
				let _this = this;
				_this.uniRequest({
					url: `/my/book_read`,
					method: 'post',
					data: {
						page_index: _this.page_index,
						page_num: _this.page_num
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							this.data = this.data.concat(res.data.records);
							this.count = res.data.count||0
						}
					},
				});
			},
			getDetails(item) {
				//console.log('item=继续=', item)
			},
		}
	}
</script>

<style lang='less' scoped>
	.content {
		min-height: 100vh;
		background-color: #eee7e5;
		.topNav {
			background: #a67000;
			color: white;
			background: #fffaf0;
			color: #000000;
		}

		.dataCont {
			padding: 32rpx;

			.item {
				padding: 32rpx;
				background-color: white;
				border-radius: 12rpx;
				margin-bottom: 32rpx;
				display: flex;
				.coverImg {
					width: 156rpx;
					height: 201rpx;
					border-radius: 12rpx;
					margin-right: 16rpx;
				}

				.title {
					font-size: 32rpx;
					line-height: 48rpx;
					font-weight: bold;
					color: #000000;
				}

				.progress {
					margin-top: 16rpx;
					line-height: 48rpx;
					font-size: 28rpx;
					color: #959BA5;
				}
			}
		}
	}
</style>
